@import "../_variables";

// TODO: Removal Animations as well

// Pop-in
.effeckt-list[data-effeckt-type='pop-in'] {
  overflow: hidden;
}
.effeckt-list[data-effeckt-type='pop-in'] .new-item {
  max-height: 0;
  opacity: 0;
  transform: translateX(-300px);
  animation:
    openSpace $effeckt-list-item-transition-duration ease forwards,
    moveIn $effeckt-list-item-transition-duration*1.5 $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='pop-in'] .remove-item {
  max-height: 50px;
  opacity: 1;
  animation:
    moveOut $effeckt-list-item-transition-duration*1.5 $effeckt-list-item-transition-duration ease forwards,
    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*1.5;
}
@keyframes openSpace {
  to {
    max-height: 50px;
  }
}
@keyframes moveIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes moveOut {
  to {
    opacity: 0;
    transform: translateX(-300px);
  }
}
@keyframes closeSpace {
  to {
    max-height: 0px;
  }
  from {
    max-height: 50px;
  }
}


// Expand in
.effeckt-list[data-effeckt-type='expand-in'] .new-item {
  max-height: 0;
  opacity: 0;
  transform: scale(0);
  animation: growHeight $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='expand-in'] .remove-item {
  animation: shrinkHeight $effeckt-list-item-transition-duration ease forwards;
}
@keyframes growHeight {
  to {
    // max-height kinda janky way to do this
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes shrinkHeight {
  to {
    max-height: 0;
    opacity: 1;
    transform: scale(0);
  }
  from {
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}

// Wobble in
.effeckt-list[data-effeckt-type='wobble-in'] .new-item {
  backface-visibility: visible;
  animation:
    WobbleInX $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
    openSpace $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='wobble-in'] .remove-item {
  backface-visibility: visible;
  animation:
    WobbleOutX $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
    closeSpace $effeckt-list-item-transition-duration*2 ease forwards $effeckt-list-item-transition-duration*3;
}
@keyframes WobbleInX {
  0% {
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(250px) rotateX(-10deg);
  }
  70% {
    transform: perspective(250px) rotateX(10deg);
  }
  100% {
    transform: perspective(250px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes WobbleOutX {
  0% {
    transform: perspective(250px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }
}


// Flip in
.effeckt-list[data-effeckt-type='flip-in'] .new-item {
  backface-visibility: visible;
  transform-origin: top left;
  animation:
    FlipIn $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
    openSpace $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='flip-in'] .remove-item {
  backface-visibility: visible;
  transform-origin: top left;
  animation:
    FlipOut $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,
    closeSpace $effeckt-list-item-transition-duration*2 ease forwards $effeckt-list-item-transition-duration*2;
}
@keyframes FlipIn {
  0% {
    transform: perspective(300px) rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(300px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes FlipOut {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}


// Fall in
.effeckt-list[data-effeckt-type='fall-in'] .new-item {
  backface-visibility: visible;
  animation:
    openSpace $effeckt-list-item-transition-duration*2 ease forwards,
    fallInX $effeckt-list-item-transition-duration*2 both;
}
.effeckt-list[data-effeckt-type='fall-in'] .remove-item {
  backface-visibility: visible;
  transform-origin: top left;
  animation:
    fallOffX $effeckt-list-item-transition-duration*2 both,
    closeSpace $effeckt-list-item-transition-duration*1.5 ease forwards $effeckt-list-item-transition-duration;
}
@keyframes fallInX {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fallOffX {
  0% {
    opacity: 1;
    transform: rotateZ(0);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) rotateZ(90deg);
  }
}


// From Above
.effeckt-list[data-effeckt-type='from-above'] .new-item {
  backface-visibility: visible;
  animation:
    openSpace $effeckt-list-item-transition-duration*2 ease forwards,
    fromAbove $effeckt-list-item-transition-duration*2 both $effeckt-list-item-transition-duration;
}
.effeckt-list[data-effeckt-type='from-above'] .remove-item {
  backface-visibility: visible;
  animation:
    toAbove $effeckt-list-item-transition-duration*2 both,
    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*1.3;
}
@keyframes fromAbove {
  0% {
    opacity: 0;
    transform: scale(3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes toAbove {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

// Wobble Out
.effeckt-list[data-effeckt-type='wobble-out'] .new-item {
  backface-visibility: visible;
  animation:
    openSpace $effeckt-list-item-transition-duration*2 ease forwards,
    fallInX $effeckt-list-item-transition-duration*2 both;
}
.effeckt-list[data-effeckt-type='wobble-out'] .remove-item {
  backface-visibility: visible;
  transform-origin: top left;
  animation:
    wobbleOutY $effeckt-list-item-transition-duration*3 both $effeckt-list-item-transition-duration,
    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*3;
}
@keyframes wobbleOutY {
  0% {
    opacity: 1;
    transform: rotateZ(0);
  }
  20% {
    opacity: 1;
    transform: rotateZ(140deg);
  }
  40% {
    opacity: 1;
    transform: rotateZ(60deg);
  }
  60% {
    opacity: 1;
    transform: rotateZ(110deg);
  }
  70% {
    opacity: 1;
    transform: rotateZ(90deg) translateX(0);
  }
  90% {
    opacity: 1;
    transform: rotateZ(90deg) translateX(400px);
  }
  100% {
    opacity: 0;
    transform: rotateZ(90deg) translateX(400px);
  }
}


// Bouncy Slide In
.effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item {
  backface-visibility: visible;
  animation:
    bouncySlideIn $effeckt-list-item-transition-duration*2 both,
    openSpace $effeckt-list-item-transition-duration ease forwards;
}
.effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item {
  backface-visibility: visible;
  animation:
    fallOffY $effeckt-list-item-transition-duration*3 both $effeckt-list-item-transition-duration,
    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*3.25;
}
@keyframes bouncySlideIn {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
  70% {
    opacity: 1;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fallOffY {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotateZ(0deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotateZ(0deg);
  }
  75% {
    opacity: 0.75;
    transform: translateX(-50%) translateY(0) rotateZ(-30deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
  }
}

